<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/header.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的订单</title>
    <!-- JqueryUI -->
    <link rel="stylesheet" type="text/css" href="${style}/front/jquery-ui.css">

    <link rel="stylesheet" type="text/css" href="${style}/animate.min.css">
    <link rel="stylesheet" type="text/css" href="${style}/input.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${Bootstrap}/css/bootstrap.css">
    <!-- Awesome font icons -->
    <link rel="stylesheet" type="text/css" href="${style}/front/font-awesome.min.css" media="screen">
    <!-- Owlcoursel -->
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.transitions.css">
    <!-- Magnific-popup -->
    <link rel="stylesheet" type="text/css" href="${style}/front/magnific-popup/magnific-popup.css">
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="${style}/front/style.css" media="screen">
    <!-- Fw -->
    <link rel="stylesheet" type="text/css" href="${style}/front/fw.css" media="screen">
    <!-- BeAlert -->
    <link rel="stylesheet" type="text/css" href="${Resource}/BeAlert/BeAlert.css" media="screen">

</head>
<body>
<%--herder--%>
<jsp:include page="../header.jsp"/>

<section class="m-t-0">
    <input type="text" value="${pageIndex}" hidden id="pageIndex">
    <input type="text" value="${pageCount}" hidden id="pageCount">
    <input type="text" value="${condition}" hidden id="condition">
    <div class="container m-t-30">
        <%--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>--%>
        <div class="row">
            <div class="col-sm-2 col-md-2 col-lg-2 pull-left">
                <h3 class="title f-30">个人中心</h3>
            </div>

            <form action="/front/purchase/purchaseId" method="post" class="col-sm-6 col-md-6 col-lg-6 pull-left">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="订单号..." name="perId" value="">
                    <span class="input-group-btn"><button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-search"></i>搜索</button></span>
                </div>
                <br>
            </form>
        </div>
        <div class="row ht-tabs ht-tabs-product">
            <div class="col-md-3 col-lg-2 pull-left-xs">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="panel panel-default">
                        <a href="/front/mybuycar/buycarlist">购物车</a>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">我的订单</a>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li <c:if test="${title == 'alls'}"> class="active"</c:if>>
                                    <a href="/front/purchase/alls">全部</a>
                                </li>
                                <li <c:if test="${title == 'waits'}"> class="active"</c:if>>
                                    <a href="/front/purchase/waits">待付款</a>
                                </li>
                                <li <c:if test="${title == 'payed'}"> class="active"</c:if>>
                                    <a href="/front/purchase/payed">待发货</a>
                                </li>
                                <li <c:if test="${title == 'sent'}"> class="active"</c:if>>
                                    <a href="/front/purchase/sent">待收货</a>
                                </li>
                                <li <c:if test="${title == 'done'}"> class="active"</c:if>>
                                    <a href="/front/purchase/done">已完成</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">优惠券</a>
                        <div id="collapse2" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li role="presentation">
                                    <a href="/front/mycoupons/showdetail">全部优惠券</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/mycoupons/showdetailbyMycoupons">我的优惠券</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default">
                        <a href="/front/wallet">我的钱包</a>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">个人信息管理</a>
                        <div id="collapse4" class="panel-collapse collapse in">
                            <ul class="panel-body" >
                                <li role="presentation">
                                    <a href="/front/persion/showMyInfo">我的信息</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/address/showaddress">地址管理</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/persion/showupdatepwd">修改密码</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-md-9 col-lg-10">
                <!-- Tab panes -->
                <input type="text" hidden id="title" value="${title}">
                <div class="content">
                    <div class="row">
                        <c:if test="${empty purchaseVoList}">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h4 class="panel-title">什么都没有</h4>
                                </div>
                            </div>
                        </c:if>

                        <c:forEach items="${purchaseVoList}" var="item">
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        订单号: ${item.id}&nbsp;&nbsp;&nbsp;&nbsp;
                                        订单状态: ${SysDict['order_status'][item.orderStatus]}&nbsp;&nbsp;&nbsp;&nbsp;
                                        支付类型: ${SysDict['pay_type'][item.paytype]}
                                        <div class="pull-right">
                                            <c:if test="${item.orderStatus=='0'}">
                                                <button class="btn btn-sm btn-success pay" pid="${item.id}">
                                                    <i class="glyphicon glyphicon-transfer"></i></button>
                                            </c:if>
                                            <c:if test="${item.orderStatus=='3'}">
                                                <button class="btn btn-sm btn-success done" pid="${item.id}">
                                                    <i class="glyphicon glyphicon-ok-sign"></i></button>
                                            </c:if>
                                            <button class="btn btn-sm btn-danger delp" pid="${item.id}">
                                                <i class="glyphicon glyphicon-trash"></i></button>
                                        </div>
                                    </h4>
                                </div>
                                <div class="panel-body">
                                    <table class="table table-hover">
                                        <colgroup>
                                            <col width="50">
                                            <col width="250">
                                            <col width="80">
                                            <col width="50">
                                            <col>
                                        </colgroup>
                                        <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>商品名称</th>
                                            <th>单价</th>
                                            <th>数量</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <c:set var="i" value="0"/>
                                        <c:forEach items="${item.buycarsList}" var="buycar">
                                            <c:set var="i" value="${i+1}"/>
                                            <tr>
                                                <td>${i}</td>
                                                <td><a href="" class="goods-detail" carId="${buycar.id}" perId="${item.id}" flag="${item.orderStatus}" data-toggle="modal" data-target="#detail">${buycar.croPurgoods.goodname}</a></td>
                                                <td>${buycar.actualprice}</td>
                                                <td>${buycar.numbers}</td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="panel-footer">
                                    <%--<div class="row pull-right">--%>
                                        额外费用: ${item.excessfee}
                                        订单总价: ${item.totalprice}
                                    <%--</div>--%>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
                <div id="fullpage" class="pull-right"></div>
            </div>
        </div>
    </div>
</section>

<%--footer--%>
<jsp:include page="../footer.jsp"/>

<!-- jQuery -->
<script src="${jquery}/jquery.js" charset="utf-8"></script>
<!-- JqueryUI -->
<script src="${jquery}/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${Bootstrap}/js/bootstrap.js"></script>
<!-- Owl-coursel -->
<script src="${Js}/front/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${Js}/front/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${Js}/front/script.js"></script>
<%--BeAlert--%>
<script src="${Resource}/BeAlert/BeAlert.js"></script>
<%--purchase--%>
<script src="${Js}/front/purchase.js"></script>

<link rel="stylesheet" href="${Layui}/css/layui.css" media="all">

<script src="${Layui}/layui.js" charset="utf-8"></script>

<script text="type/javascript" src="${Js}/front/input.js"></script>

<script>
    layui.use(['laypage'], function () {
        var $ = layui.jquery;
        var laypage = layui.laypage;

        laypage({
            cont: 'fullpage',
            pages: $('#pageCount').val(), //分页总数
            skip: true,
            curr: $('#pageIndex').val(),
            jump: function (obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                if (first != true) {//是否首次进入页面
                    var pageIndex = obj.curr;//获取点击的页码
                    var condition = '${title}?pageIndex=' + pageIndex;
                    window.location.href = "/front/purchase/" + condition;
                }
            }
        });
    });
</script>
<!-- 模态框（Modal） -->
<div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    商品信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-8 col-md-8 form-horizontal">
                        <input type="text" id="perId" name="perId" value="" hidden>
                        <input type="text" id="goodsId" name="goodsId" value="" hidden>
                        <div class="form-group">
                            <label class="col-sm-2 control-label f-bold">名称</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="gname" readonly placeholder="商品名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label f-bold">描述</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="description" readonly placeholder="商品描述">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label f-bold">单价</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="price" readonly placeholder="商品单价">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label f-bold">数量</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="num" readonly placeholder="商品数量">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label f-bold">总价</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="total" readonly placeholder="商品总价">
                            </div>
                        </div>

                        <div class="form-group return hidden">
                            <label class="col-sm-2 control-label f-bold">申请类型</label>
                            <div class="col-sm-9">
                                <label class="control-label">
                                    <i class='input_style radio_bg radio_bg_check'>
                                        <input type="radio" name="gtype" checked="checked" id="return" value="1">
                                    </i>退货
                                </label>
                                <label class="control-label">
                                    <i class='input_style radio_bg'>
                                        <input type="radio" name="gtype" id="change" value="2">
                                    </i>替换
                                </label>
                            </div>
                        </div>

                        <div class="form-group change hidden">
                            <label class="col-sm-2 control-label f-bold">ID</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" readonly id="bgoodsid" placeholder="替换商品的ID">
                            </div>
                        </div>

                        <div class="form-group change hidden">
                            <label class="col-sm-2 control-label f-bold">数量</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="bnum" placeholder="替换商品的数量">
                            </div>
                        </div>

                        <div class="form-group return hidden">
                            <label class="col-sm-2 control-label f-bold">退换理由</label>
                            <div class="col-sm-9">
                                <textarea type="text" class="form-control" id="reason" placeholder="退换理由"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <div class="form-group">
                            <label class="f-bold">商品图片</label>
                            <a id="photo-a" href="" target="_blank">
                                <img id="photo" class="col-sm-12 col-md-12" src="" alt="pic" style="max-height: 200px;">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a id="closeBtn" type="button" class="btn btn-default" data-dismiss="modal">关闭</a>
                <a id="apply" type="button" class="btn btn-danger">
                    申请退换货
                </a>
                <a id="btnSub" type="button" class="btn btn-success hidden">提交</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
